Skip to content

Fix: Accordion collapsed state background color not applying correctly#3675

Open
param-chandarana wants to merge 1 commit intogambitph:developfrom
param-chandarana:fix/accordion-collapsed-state-background-3670
Open

Fix: Accordion collapsed state background color not applying correctly#3675
param-chandarana wants to merge 1 commit intogambitph:developfrom
param-chandarana:fix/accordion-collapsed-state-background-3670

Conversation

@param-chandarana
Copy link

@param-chandarana param-chandarana commented Jan 14, 2026 •
edited by coderabbitai bot
Loading

When using different background colors for Normal and Collapsed states on the accordion's inner column, the Collapsed state color was not being applied when the accordion was closed.

Root Cause:

  1. CSS selector in block-css/index.js was targeting '.stk-block-accordion.stk--is-open' which applied collapsed styles when accordion was OPEN (inverted logic)
  2. Frontend class toggle was toggling based on class existence instead of the actual 'open' attribute state

Fixes:

  1. Changed collapsed CSS selector to ':not(.stk--is-open)' to correctly apply styles when accordion is closed
  2. Fixed frontend-accordion.js to add/remove 'stk--is-open' class based on el.open property instead of toggling

Screenshots:
image
image

Fixes #3670

Summary by CodeRabbit

  • Bug Fixes
    • Improved accordion component state management to ensure open and closed states are consistently synchronized and properly reflected in the user interface.

✏️ Tip: You can customize this high-level summary in your review settings.

@param-chandarana
Fix: Accordion collapsed state background color not applying correctly
9253836 
When using different background colors for Normal and Collapsed states on
the accordion's inner column, the Collapsed state color was not being
applied when the accordion was closed.

**Root Cause:**
1. CSS selector in block-css/index.js was targeting '.stk-block-accordion.stk--is-open'
   which applied collapsed styles when accordion was OPEN (inverted logic)
2. Frontend class toggle was toggling based on class existence instead of
   the actual 'open' attribute state

**Fixes:**
1. Changed collapsed CSS selector to ':not(.stk--is-open)' to correctly
   apply styles when accordion is closed
2. Fixed frontend-accordion.js to add/remove 'stk--is-open' class based on
   el.open property instead of toggling

Fixes gambitph#3670
@coderabbitai
Copy link

coderabbitai bot commented Jan 14, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

The accordion component's state determination has been refactored. The frontend logic now directly checks the element's open attribute instead of relying on class presence, while CSS selectors for collapsed states are inverted to target elements lacking the stk--is-open class.

Changes

Cohort / File(s) Summary
Accordion State Logic
src/block/accordion/frontend-accordion.js		 Changed class toggle for stk--is-open to directly reference the element's open attribute rather than checking class presence
Accordion CSS Generation
src/components/block-css/index.js		 Inverted collapsed state CSS selectors from .stk--is-open to :not(.stk--is-open) across all state paths

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A toggle most clever, so spry and so neat,
Open attribute and class now compete,
With :not() inverted, the states align true,
The accordion dances in CSS anew! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main fix: correcting how the accordion's collapsed state background color is applied. It directly matches the primary change addressing the inverted CSS selector logic and class toggling issue.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧹 Recent nitpick comments
src/components/block-css/index.js (1)

304-312: Selector fix is correct, but duplicate branches remain.

The change from .stk--is-open to :not(.stk--is-open) correctly fixes the inverted logic so collapsed styles now apply when the accordion is closed.

However, the TODO on line 304 still applies — lines 309 and 311 produce identical selectors. Consider consolidating these branches or documenting why they're separate if there's intent to differentiate them in the future.

♻️ Optional: consolidate duplicate branches 
 	if ( hasCollapsed ) {
 		if ( generateForAllBlockStates ) {
 			collapsedSelector = prependClass( selector, '%h :where(.stk-block-accordion:not(.stk--is-open)) .%s' )
-		} else if ( blockState === 'collapsed' ) {
-			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' )
 		} else {
 			collapsedSelector = prependClass( selector, ':where(.stk-block-accordion:not(.stk--is-open)) .%s' )
 		}
 	}
📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 56b250f and 9253836.

📒 Files selected for processing (2)
  • src/block/accordion/frontend-accordion.js
  • src/components/block-css/index.js
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/block-css/index.js (2)
src/components/block-css/util.js (2)
  • prependClass (167-178)
  • prependClass (167-178)
src/util/index.js (1)
  • selector (264-306)
🔇 Additional comments (1)
src/block/accordion/frontend-accordion.js (1)

89-91: LGTM!

The change from toggle-based to explicit add/remove based on el.open is correct. This ensures the stk--is-open class accurately reflects the <details> element's actual open state, which is essential for the :not(.stk--is-open) CSS selector to work correctly for collapsed styling.

✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Accordion Block - Normal state background color overrides collapsed state

1 participant

@param-chandarana